<template>
  <div>
    <el-form inline>
      <el-form-item>
        <el-input v-model="configSearchDTO.searchValue"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getConfigList">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="openDialog(null)">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="configurations">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="configKey" label="配置项key"></el-table-column>
      <el-table-column prop="name" label="配置项名称"></el-table-column>
      <el-table-column prop="value" label="配置项值"></el-table-column>
      <el-table-column prop="description" label="描述/备注"></el-table-column>
      <el-table-column prop="creatTime" label="创建时间"></el-table-column>
      <el-table-column prop="creatBy" label="创建人"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-text type="danger" @click="openDialog(scope.row.id)">修改</el-text>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog
        v-model="addDialogVisible"
        :title="isAdd ? '新增' : '修改'+'配置'"
        width="500"
        @close="addRef.resetFields()">
      <div>
        <el-form :model="addConfig" ref="addRef" label-width="auto">
          <el-form-item label="编号" prop="id" v-if="!isAdd">
            <el-input v-model="addConfig.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="配置项key" prop="configKey">
            <el-input v-model="addConfig.configKey"></el-input>
          </el-form-item>
          <el-form-item label="配置项名称" prop="name">
            <el-input v-model="addConfig.name"></el-input>
          </el-form-item>
          <el-form-item label="配置项值" prop="value">
            <el-input v-model="addConfig.value"></el-input>
          </el-form-item>
          <el-form-item label="描述/备注" prop="description">
            <el-input v-model="addConfig.description"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitConfig">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {
  getConfiguration,
  getConfigurationById,
  modifyConfiguration,
  saveConfiguration
} from "@/api/home/system/configuration";

let configSearchDTO = reactive({
  pageNum: 1,
  pageSize: 10,
  searchValue: '',
})
let addRef = ref()
let isAdd = ref(true)
let addDialogVisible = ref(false)
let addConfig = ref({
  configKey: '',
  name: '',
  value: '',
  description: ''
})
let configurations = ref([])

function submitConfig() {
  //发送新增请求
  if (isAdd.value) {
    console.log("新增请求")
    saveConfiguration(addConfig.value).then(res => {
      getConfigList()
    })
  } else {
    //  发送修改请求
    console.log("修改请求")
    modifyConfiguration(addConfig.value).then(() => {
      getConfigList()
    })
  }
  addDialogVisible.value = false
}

function openDialog(id) {
  if (id) {
    isAdd.value = false
    getConfigurationById(id).then(res => {
      addConfig.value = res.data
    })
  } else {
    isAdd.value = true
  }
  addDialogVisible.value = true
}

function getConfigList() {
  getConfiguration(configSearchDTO).then(res => {
    configurations.value = res.data.records
  })
}

onMounted(() => {
  getConfigList()
})

</script>

<style scoped>

</style>
